import styles from "./root.module.css";
import logoPng from "@/assets/logo.png";
import { Avatar, Dropdown, Space } from "antd";
import { UserOutlined } from "@ant-design/icons";
import { SButton } from "@cnjingx/antd-components";
import { useNavigate } from "react-router-dom";
import { StorageKey } from "@/enums/dictionaries.js";
import { fetchLogout } from "@/api/modules/login";
import { ChangePwdDrawer } from "@/pages/root/components/change-pwd.jsx";
import { useState } from "react";
import { getUserInfo } from "@/utils";
export default function Header() {
  const navigate = useNavigate();
  const [openChangePwdDrawer, setOpenChangePwdDrawer] = useState(false);
  const userName = getUserInfo().nickName || "用户";

  const say = (() => {
    const nowHours = new Date().getHours();
    if (11 <= nowHours && nowHours < 14) {
      return "中午好";
    }
    if (14 <= nowHours && nowHours < 18) {
      return "下午好";
    }
    if (18 <= nowHours && nowHours < 24) {
      return "晚上好";
    }
    if (0 <= nowHours && nowHours < 9) {
      return "早上好";
    }
    return "上午好";
  })();

  const items = [
    {
      key: "修改密码",
      label: (
        <SButton type={"link"} size={"small"} style={{ color: "#333" }}>
          修改密码
        </SButton>
      ),
      onClick: () => {
        setOpenChangePwdDrawer(true);
      },
    },
    {
      key: "退出登录",
      label: (
        <SButton danger type={"link"} size={"small"}>
          退出登录
        </SButton>
      ),
      onClick: () => {
        fetchLogout();
        navigate("/login", {
          replace: true,
        });
        localStorage.removeItem(StorageKey.token);
      },
    },
  ];

  return (
    <header className={styles.header}>
      <img src={logoPng} />

      <div className={"flex items-center"}>
        <Space>
          <span>
            {say}，{userName}
          </span>
          <Dropdown menu={{ items }} placement="bottom">
            <Avatar
              style={{ backgroundColor: "#87d068" }}
              icon={<UserOutlined />}
            />
          </Dropdown>
        </Space>
      </div>

      <ChangePwdDrawer
        open={openChangePwdDrawer}
        onClose={() => setOpenChangePwdDrawer(false)}
      />
    </header>
  );
}
